<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> 
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<jsp:include page="../inc.jsp" /> 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="${ctx }/js/kindedit/themes/default/default.css" />
		<link rel="stylesheet" href="${ctx }/js/kindedit/plugins/code/prettify.css" />
		<script type="text/javascript" src="${ctx }/js/kindedit/kindeditor-all.js" ></script>
		<script type="text/javascript" src="${ctx }/js/kindedit/lang/zh-CN.js" ></script>
		<script type="text/javascript" src="${ctx }/js/kindedit/plugins/code/prettify.js" ></script>
	</head>
	<body>
		<style type="text/css">
			table#formTb tr{
				height: 30px;
				border-bottom: 1px solid #d4d4d4;
				margin: 5px;
			}	
			table#formTb tr td{
				padding: 5px 3px;
			}
		</style>
		<script type="text/javascript">
		    var dg,editor;
		    KindEditor.ready(function(K) {
				 editor= K.create('textarea[id="content"]', {
					cssPath : '${ctx }/js/kindedit/plugins/code/prettify.css',
					uploadJson : '${ctx }/js/kindedit/jsp/upload_json.jsp',
					fileManagerJson : '${ctx }/js/kindedit/jsp/file_manager_json.jsp',
					allowFileManager : true,
					afterCreate : function() {
						var self = this;
						K.ctrl(document, 13, function() {
							self.sync();
							document.forms['example'].submit();
						});
						K.ctrl(self.edit.doc, 13, function() {
							self.sync();
							document.forms['example'].submit();
						});
					}
				});
				prettyPrint();
			});
		    function fjCheck(obj){
		    	$(obj).tooltip({    
		    		position: 'right',    
		    		content: '<span style="color:#fff">This is the tooltip message.</span>',
		    		onShow: function(){        
		    			$(this).tooltip('tip').css({            
		    				backgroundColor: '#666',            
		    				borderColor: '#666'        
		    			});    
		    		}
		    	})
		    }
			$(function(){
				
				dg = $('#table').datagrid({
					url:'${ctx}/nc/find.coc',
					fit:true,
					singleSelect:true,
					rownumbers:true,
					pagination:true,
					columns:[[
						{field:'ck',checkbox:true,width:50},
						{field:'title',title:'通知标题',width:150,fixed:true},
						{field:'showDate',title:'发布时间',width:100,fixed:true},
						{field:'endDate',title:'截止时间',width:100,fixed:true},
						{field:'content',title:'通知内容',width:300,fixed:false,
							formatter:function(v,r,i){
								return "此处省略...,注意:<font style='color:red'>点击右侧'查看',预览内容</font>"
							}	
						},
						{field:'fj',title:'附件',width:70,fixed:true,align:'center',
							formatter:function(v,r,i){
								var fs = r.fs;
								if(fs.length>0){
									v = "附件数:<font style='color:red'>"+fs.length+"</font>";
								}
								return v;
							}	
						},
						{field:'at',title:'操作',width:100,fixed:true,align:'center',
							formatter:function(v,r,i){
								v = '';
								v += '<a onclick="checkData('+i+')" href="#" style="color:blue;text-decoration:none">查看<a/>';
								v += '&nbsp;|&nbsp;';
								v += '<a onclick="delData('+i+')" href="#" style="color:red;text-decoration:none">删除<a/>';
								return v;
							},
							styler:function(v,r,i){
								return 'background-color:#d4d4d4'
							}
						}
					]],
					onLoadSuccess:function(data){
						$('#ns').html(data.total);
					}
				});
				//刷新分页
				setTimeout(function(){dg.datagrid({loadFilter:pagerFilter}).datagrid('loadData')},10);
				
				$('#btn1').click(function(){
					var f = $('#dataForm');
					if(f.form('validate')){
						var sd = $('#showDate').datebox('getValue');
						var ed = $('#endDate').datebox('getValue');
						sdd = getDateFromParam(sd);
						edd = getDateFromParam(ed);
						if(sdd - edd >0){
							$.messager.alert('系统警告','发布时间不能大于截止时间!','waring');
							return false;
						}
						var title = $('#title').textbox('getValue');
						//获取富文本内容
						var content = editor.html();
						$("#ct").val(content);
						//加载进度条
						progressLoad();
						var option = {
							type:'post',
							url:'${ctx}/nc/insert.coc',
							dataType:'json',
							success:function(r){
								$.messager.alert('系统提示',r.msg,'info');
								if(r.is){
									//清空表单内容
									cleanForm();
									//刷新表格
									dg.datagrid('reload');
									$('#ns').html(r.obj);
								}
								//关闭进度条
								progressClose();
							}
						};
						//表单提交
						f.ajaxSubmit(option);
					}
				});
				
			});
			
			
			function checkData(index){
				parent.$.modalDialog({
					width:800,
					height:620,
					modal:true,
					closable:true,
					title:'预览通知',
					href:'${ctx}/nc/showNotice.coc?index='+index
				});
			}
			
			function cleanForm(){
				$('#showDate').datebox('setValue','');
				$('#endDate').datebox('setValue','');
				$('#title').textbox('setValue','');
				editor.html('');
				$('#fs').html('&nbsp;');
			}
			
			function getDateFromParam(str){
				var d = new Date();
				str = str.split("-");
				y = parseInt(str[0]);
				m = parseInt(str[1]);
				day = parseInt(str[2]);
				d.setFullYear(y, m, day);
				
				return d;
			}
			
			function addFiles(){
				var str = '<span style="float:left;margin-left:5px ">'+
									'<input type="file" name="files">'+ 
								'<a onclick="removeFile(this)" href="#" style="color:red">移除</a>'+
							'</span>';
				$('#fs').append(str);
			}
			
			function removeFile(obj){
				var span = $(obj).parents('span');
				$(span).remove();
			}
		</script>
		<div id="tt" class="easyui-tabs" data-options="fit:true,tabPosition:'left'">   
		    <div data-options="iconCls:'icon-eadd'" title="新增通知" 
		    	style="padding:10px 20px 5px 20px;display:none;">   
		        <div id="cc03" class="easyui-layout" fit=true>   
				    <div data-options="region:'center',border:false" style="padding:5px;background:#fff;">
				    	<form id="dataForm" enctype="multipart/form-data">
							<table id="formTb" width="100%">
								<tr>
									<td width="80px" align="right">通知标题:</td>
									<td>
										<input type="hidden" name="content" id="ct">
										<input  class="easyui-textbox" id="title" name="title" data-options="width:300,required:true">
									</td>
								</tr>
								<tr>
									<td align="right">发布时间:</td>
									<td>
										<input class="easyui-datebox" name="showDate" id="showDate" required=true editable=false>
									</td>
								</tr>
								<tr>
									<td align="right">截止时间:</td>
									<td>
										<input class="easyui-datebox" name="endDate" id="endDate" required=true editable=false>
									</td>
								</tr>
								<tr>
									<td align="right">通知内容:</td>
									<td>
										<textarea id="content" cols="100" rows="8" 
										style="width:700px;height:300px;visibility:hidden;">
										</textarea>
									</td>
								</tr>
								<tr>
									<td align="right">
									通知附件:
									<a onclick="addFiles()" class="easyui-linkbutton" 
									data-options="
										iconCls:'icon-eadd',
										plain:true
									"></a>
									</td>
									<td id="fs">
										
									</td>
								</tr>
							</table>
						</form>   
				    	
				    </div>
				    <div data-options="region:'south',border:false" style="height:30px;text-align: center;background:#fff
					padding-top: 10px;">
				    	<a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">确定发布</a>
				    	<a id="btn2" onclick="cleanForm()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">清除内容</a>
				    </div>   
				</div> 
			
		    </div>   
		    <div title="通知列表
		    	<font style='color:#fff;background:red;border-radius: 3px;
		    	margin-top: 0px;width:15px' id='ns' >123</font>" 
		    	data-options="closable:false,iconCls:'icon-more'" 
		    	style="overflow:auto;padding:20px;display:none;">   
				<div id="cc04" class="easyui-layout" fit=true>   
				    <div data-options="region:'north'" style="height:50px;">
				    	<div style="height: 30px;padding:10px 0px 5px 10px;min-width: 600px;">
				    		<form id="searchForm">
				    			<table class="searchTb">
				    				<tr>
				    					<td>
				    						条件1:
				    						<input class="easyui-textbox" name="" 
				    							style="border-radius: 0px;width:150px" />
				    						条件2:
				    						<input class="easyui-textbox" name="" 
				    							style="border-radius: 0px; width:150px"/>
				    					</td>
				    					<td>
				    						<a class="easyui-linkbutton" iconCls="icon-search" 
				    							style="border-radius: 3px;">查询一下</a>
				    					</td>
				    				</tr>
				    			</table>
				    		</form>
				    	</div>
				    </div>   
				    <div data-options="region:'center',title:'&nbsp;',iconCls:'icon-more',border:false" 
				    	style="padding:0px;background:#eee;">
				    	<table id="table"></table>
				    </div>   
				</div> 		    	
		    </div>     
		</div>
	</body>
</html>
